<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue学习</title>
	<script src="js/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

</head>
<body>
<div id="app" >
      <mydiv massage="今天要下雨" imgsrc="img/undate.png"></mydiv>
      <mydiv massage='qusi' imgsrc="img/head.png"></mydiv>
</div> 

<!-- 注册一个组件 -->
<template id="my_btn">
    <div>
        <h1>{{massage}}</h1>
        <img :src="imgsrc">
        <button @click="counter++">{{counter}}</button>
    </div>
</template>
</body>
</html>

<script> 
Vue.component('mydiv',{
  template:'#my_btn',
  props:['massage','imgsrc'],
  data(){
    return {
      counter:0
    }
  }
});

 new Vue({
  el: '#app',
  data:{
   
  },
  methods:{
    
  }


})
</script>